import 'package:awak/common/routers/router_names.dart';
import 'package:awak/common/utils/util_text.dart';
import 'package:awak/common/utils/util_toast.dart';
import 'package:awak/common/values/images.dart';
import 'package:awak/common/values/svg.dart';
import 'package:beamer/beamer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:awak/bloc/auth/auth_bloc.dart';
import 'package:awak/bloc/auth/auth_event.dart';
import 'package:awak/bloc/auth/auth_state.dart';

class RegisterPage extends StatelessWidget {
  const RegisterPage({super.key});

  @override
  Widget build(BuildContext context) {
    final TextEditingController usernameController = TextEditingController();
    final TextEditingController passwordController = TextEditingController();
    final TextEditingController confirmController = TextEditingController();
    // 屏幕适配变量
    final isTablet = DeviceUtils.isTablet(context);
    return BlocListener<AwakBloc, AwakState>(
      listener: (context, state) {
        if (state is AwakFailure) {
          AwakToast.showCustomToast(context, state.message);
        } else if (state is AwakSuccess) {
          // 注册成功，跳转登录页或主页
          Beamer.of(context).beamToNamed(RouterNames.login);
        }
      },
      child: BlocBuilder<AwakBloc, AwakState>(
        builder: (context, state) {
          return Scaffold(
            body: Stack(
              children: [
                Image.asset(AwakImages.loginBg, fit: BoxFit.cover, width: double.infinity, height: double.infinity),
                Positioned(
                  top: 40.h,
                  left: 0,
                  right: 0,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          SizedBox(width: 10.w),
                          IconButton(
                            onPressed: () {
                              Beamer.of(context).beamBack();
                            },
                            icon: Icon(AwakSvg.back, size: 22.w),
                          ),
                        ],
                      ),
                      Image.asset(AwakImages.awakTitle, width: 171.w, height: 56.h),
                      SizedBox(height: 10.h),
                      Text(
                        'Strive To Break One\'s Limits',
                        style: AwakText.body14Style.copyWith(
                          color: const Color(0xFF4D4D4D),
                        ),
                      ),
                      SizedBox(height: 20.h),
                      Stack(
                        children: [
                          Image.asset(
                            AwakImages.registerInputBg,
                            width: isTablet ? 275.w : 311.w,
                            height: 504.h,
                            fit: BoxFit.fill,
                          ),
                          Positioned(
                            left: 15.w,
                            top: 160.h,
                            child: Container(
                              width: isTablet ? 245.w : 283.w,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    width: double.infinity,
                                    height: 51.h,
                                    decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.circular(10.r),
                                      border: Border.all(
                                        color: const Color(0xFF262626),
                                        width: 4.w,
                                      ),
                                    ),
                                    child: TextField(
                                      controller: usernameController,
                                      decoration: InputDecoration(
                                        border: InputBorder.none,
                                        enabledBorder: InputBorder.none,
                                        focusedBorder: InputBorder.none,
                                        contentPadding: EdgeInsets.symmetric(
                                          horizontal: 10.w,
                                          vertical: isTablet ? 12.h : 10.h,
                                        ),
                                        hintText: 'Enter your username',
                                        hintStyle: AwakText.body16Style.copyWith(
                                          color: const Color(0xFFE8E8E8),
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                    ),
                                  ),
                                  SizedBox(height: 20.h),
                                  Container(
                                    width: double.infinity,
                                    height: 51.h,
                                    decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.circular(10.r),
                                      border: Border.all(
                                        color: const Color(0xFF262626),
                                        width: 4.w,
                                      ),
                                    ),
                                    child: TextField(
                                      controller: passwordController,
                                      obscureText: true,
                                      decoration: InputDecoration(
                                        border: InputBorder.none,
                                        enabledBorder: InputBorder.none,
                                        focusedBorder: InputBorder.none,
                                        contentPadding: EdgeInsets.symmetric(
                                          horizontal: 10.w,
                                          vertical: isTablet ? 12.h : 10.h,
                                        ),
                                        hintText: 'Enter your password',
                                        hintStyle: AwakText.body16Style.copyWith(
                                          color: const Color(0xFFE8E8E8),
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                    ),
                                  ),
                                  SizedBox(height: 20.h),
                                  Container(
                                    width: double.infinity,
                                    height: 51.h,
                                    decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.circular(10.r),
                                      border: Border.all(
                                        color: const Color(0xFF262626),
                                        width: 4.w,
                                      ),
                                    ),
                                    child: TextField(
                                      controller: confirmController,
                                      obscureText: true,
                                      decoration: InputDecoration(
                                        border: InputBorder.none,
                                        enabledBorder: InputBorder.none,
                                        focusedBorder: InputBorder.none,
                                        contentPadding: EdgeInsets.symmetric(
                                          horizontal: 10.w,
                                          vertical: isTablet ? 12.h : 10.h,
                                        ),
                                        hintText: 'Confirm password',
                                        hintStyle: AwakText.body16Style.copyWith(
                                          color: const Color(0xFFE8E8E8),
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                    ),
                                  ),
                                  SizedBox(height: 40.h),
                                  GestureDetector(
                                    onTap: state is AwakLoading
                                        ? null
                                        : () {
                                            if (passwordController.text != confirmController.text) {
                                              AwakToast.showCustomToast(context, 'Passwords do not match');
                                              return;
                                            }
                                            BlocProvider.of<AwakBloc>(context).add(
                                              RegisterEvent(
                                                usernameController.text,
                                                passwordController.text,
                                              ),
                                            );
                                          },
                                    child: Container(
                                      width: isTablet ? 245.w : 241.w,
                                      constraints: BoxConstraints(
                                        maxWidth: 330.w,
                                        minWidth: 241.w,
                                      ),
                                      height: 65.h,
                                      decoration: BoxDecoration(
                                        color: const Color(0xFFD0F129),
                                        borderRadius: BorderRadius.circular(10.r),
                                        border: Border.all(
                                          color: const Color(0xFF262626),
                                          width: 4.w,
                                        ),
                                      ),
                                      child: state is AwakLoading
                                          ? const Center(child: CircularProgressIndicator())
                                          : Row(
                                              mainAxisAlignment: MainAxisAlignment.center,
                                              children: [
                                                Image.asset(
                                                  AwakImages.right,
                                                  width: 24.w,
                                                  height: 16.h,
                                                ),
                                                SizedBox(width: 10.w),
                                                Text(
                                                  'SIGN UP',
                                                  style: AwakText.body18Style.copyWith(
                                                    color: const Color(0xFF000000),
                                                    fontWeight: FontWeight.w600,
                                                  ),
                                                ),
                                                SizedBox(width: 10.w),
                                                Image.asset(
                                                  AwakImages.left,
                                                  width: 24.w,
                                                  height: 16.h,
                                                ),
                                              ],
                                            ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 30.h),
                      Container(
                        width: isTablet ? 325.w : 339.w,
                        height: 50.h,
                        decoration: BoxDecoration(
                          color: const Color(0xFF000000),
                          borderRadius: BorderRadius.circular(4.r),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.apple, color: Colors.white, size: 24.w),
                            SizedBox(width: 10.w),
                            Text(
                              'Sign in with Apple',
                              style: AwakText.appleStyle.copyWith(
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(height: 20.h),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('Already have an account?', style: AwakText.newUserStyle),
                          SizedBox(width: 5.w),
                          GestureDetector(
                            onTap: () {
                              Beamer.of(context).beamToNamed(RouterNames.login);
                            },
                            child: Text('Sign in', style: AwakText.signUpStyle),
                          ),
                        ],
                      ),
                      SizedBox(height: isTablet ? 20.h : 50.h),
                      Container(
                        width: isTablet ? 325.w : double.infinity,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              'By continuing, you agree to our',
                              style: AwakText.privacyStyle,
                            ),
                            SizedBox(width: 5.w),
                            Text('Terms of Service', style: AwakText.privacyOntapStyle),
                            SizedBox(width: 5.w),
                            Text('and', style: AwakText.privacyStyle),
                            SizedBox(width: 5.w),
                            Text('EULA', style: AwakText.privacyOntapStyle),
                          ],
                        ),
                      ),
                      SizedBox(height: 20.h),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}